legato-dnd

Legato Dnd

Lite, fast, Beautiful and configurable drag & drop list.

Demo: Legato Dnd React Demo

Use with frameworks:

• for Vue 2.x: vue2-legato-dnd
• for Vue 3.x: vue-legato-dnd
• for React: react-legato-dnd

Install

# npm
npm install legato-dnd


# yarn
yarn add legato-dnd

Basic Usage

const el = document.getElementById('container')
for (let i = 0; i < 10; ++i) {
    let child = document.createElement('div')
    child = Legato.draggable(child)
    el.append(child)
}
const container = new Legato.DragDrop({ container: el })

Container Options

props from Container, usage:

type ScrollDeltaFunctionType = ({state}: { state: ParentState }) => number
type PlaceholderFunctionType = () => HTMLElement
type MoveGroup = [number, number]

interface DragDropProps {
    container: HTMLElement,
    vertical?: boolean, // default false
    groups?: MoveGroup[],
    transitionDuration?: number, // default 200
    placeholder?: HTMLElement | PlaceholderFunctionType,
    scrollSpeed?: ScrollDeltaFunctionType,
    scrollThreshold?: number, // default 0
    lockCrossAxis?: boolean, // default false
    lockArea?: boolean, // default false
    startDelay?: number, // default 0
    touchStartDelay?: number, // default 200
    startOffsetTolerate?: number, // default 5
    name?: string,
    inactiveClass?: string,
    startActiveClass?: string,
    dragActiveClass?: string,
    dropActiveClass?: string,
}

Events

basic usage:

const dragDrop = new DragDrop(options)
dragDrop.on('dragStart', () => {
    console.log('dragStart')
})
dragDrop.on('orderChange', ({from, to, order}) => {
    // do something
})

Move Position

enterViewportEdge

// position event
export interface EnterViewportEdgeEvent {
    state: ParentState
}

leaveViewportEdge

export interface LeaveViewportEdgeEvent {
    state: ParentState
}

enterContainerEdge

export interface EnterContainerEdgeEvent {
    intersectState: IntersectState
}

leaveContainerEdge

export interface LeaveContainerEdgeEvent {
    intersectState: IntersectState
}

Programming Scroll

programmingScrollStart

// scroll
export interface ProgrammingScrollStartEvent {
    startTime: number,
    state: ParentState
}

programmingScrollEnd

export interface ProgrammingScrollEndEvent {
    startTime: number,
    endTime: number,
    endState: ParentState,
    startState: ParentState
}

programmingScrollError

export interface ProgrammingScrollErrorEvent {
    startTime: number,
    state: ParentState,
    scrollDelta: number
}

programmingScroll

export interface ProgrammingScrollEvent {
    startTime: number,
    state: ParentState,
    scrollDelta: number,
    offset: number
}

Drag Lifecycle

beforeDragStart

// lifestyle
export interface BeforeDragStartEvent {
    startIndex: number,
    startGroup: MoveGroup,
    cancel: () => void
}

dragStart

export interface DragStartEvent {
    startIndex: number,
    startGroup: MoveGroup,
}

dragOver

export interface DragOverEvent {
    startIndex: number,
    startGroup: MoveGroup,
    currentIndex: number,
    currentGroup: MoveGroup
}

dragCross

export interface DragCrossEvent {
    order: number[],
    startIndex: number,
    startGroup: MoveGroup,
    currentIndex: number,
    currentGroup: MoveGroup
    lastCurrentIndex: number,
}

beforeDrop

export interface BeforeDropEvent {
    startIndex: number,
    startGroup: MoveGroup,
    endIndex: number,
    endGroup: MoveGroup
}

drop

export interface DropEvent {
    startIndex: number,
    startGroup: MoveGroup,
    endIndex: number,
    endGroup: MoveGroup
}

dragEnd

export interface DragEndEvent {
    startIndex: number,
    startGroup: MoveGroup,
    endIndex: number,
    endGroup: MoveGroup,
    order: number[]
}

orderChange

export interface OrderChangeEvent {
    order: number[],
    startIndex: number,
    startGroup: MoveGroup,
    endIndex: number,
    endGroup: MoveGroup
}